
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自适应测试</title>
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> -->
<!-- 	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/jquery.fullPage.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/myanimate.css">
	<link rel="stylesheet" href="css/my.css"> -->
</head>
<style>
.circle{
	background-color:red;
	width: 40px;
	height: 40px;
	border-radius:50%;
	margin: 100px auto;	
	position: relative; 	
}
.circle1{
	background-color:red;
	width: 20px;
	height: 40px;
	border-radius:  0 40px 40px 0 ;
	animation:show 10s steps(1,end) infinite;
	position: absolute;
	opacity: 0;
	left:50%;
}
.circle2,.circle-zhuan1{
	background: #89abdd;
	width:20px;
	height: 40px;
	position: absolute;
	top:0;
}
.circle2{
	border-radius: 40px 0 0 40px;
	background: #89abdd;
	animation:hide 10s steps(1,end) infinite;
	
	/*background: red;*/	
}
.circle-zhuan1{
	border-radius:  0 40px  40px 0;
	animation:zhuana 10s infinite linear;
	/*transform-origin: right center; */
	transform-origin:left center;
	left:50%;

}
@keyframes zhuana{
	from{
		transform:rotate(0deg);
	}
	to{

		transform:rotate(360deg);
	}
}
@keyframes hide{
	0%{
		opacity: 1;
	}
	50%,100%{
		opacity: 0;
	}
}
@keyframes show{
	0%{
		opacity: 0;
	}
	50%,100%{
		opacity: 1;
	}
}
</style>
<body>
	<div class="circle">
		<div class="circle-zhuan1"></div>
		<div class="circle1"></div>
		<div class="circle2"></div>
	</div>
	<ul>
	<li>
		<a href="">sdf<span>sdfd</span></a>
	</li>
</ul>
</body>
<style>
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {display:block; height:100px; width:100px;　background:#000;}
li a:hover {position:relative; z-index:1; }
li span {display:none;}
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
</style>

<script>

ajax({
	type:"post",
	dataType:"json"
	contetnType:"application/json",
	url:"",
	data:"",
	success:function(data){

	},
	error:function(){

	}

})

ajax({
	type:"post",
	dataType:"json",
	contetnType:"application/json",
	url:"",
	data:"",
	success:function(data){

	},
	error:function  (argument) {
		 // body...  
	}
})

</script>
</html>
